<template>
  <view class="main">
    <view class="canvas-container">
      <view :animation="animationData" class="canvas-content"></view>
      <view @click="getIndex" class="canvas-btn" :class="btnDisabled"></view>
    </view>
  </view>
</template>
<script>
export default {
  
  data() {
    return {
      awardsList: {},
      animationData: {},
      btnDisabled: "",
      runDeg: 0,
      //奖品配置
      awardsConfig: {
        chance: true,
        awards: [
          { index: 0, name: "一等奖", deg: 22 },
          { index: 1, name: "二等奖", deg: 202 },
          { index: 2, name: "三等奖", deg: 112 },
          { index: 3, name: "谢谢参与", deg: 67 },
        ],
      },
    };
  },
  mounted() {},
  onLoad() {},
  methods: {
      /**
       * 触发父组件获取奖项事件
       */
    getIndex() {
        this.$emit('getIndex')
    },
    /**
     * 发起抽奖
     */
    playReward: function (index) {
      //中奖index
      let awardDeg = this.awardsConfig.awards[index].deg; //中奖角度
      let runNum = 8; //旋转8周
      let duration = 4000; //时长
      this.runDeg = this.runDeg || 0;
      this.runDeg = 360 * runNum + awardDeg;
      //创建动画
      let animationRun = uni.createAnimation({
        duration: duration,
        timingFunction: "ease",
      });
      animationRun.rotate(this.runDeg).step();
      this.animationData = animationRun.export();
      this.btnDisabled = "disabled";

      let awardsConfig = this.awardsConfig;
      setTimeout(
        function () {
          uni.showModal({
            content: this.awardsConfig.awards[index].name,
            showCancel: false,
          });
          this.btnDisabled = "";
          let animationRun = uni.createAnimation({
            duration: 1,
            timingFunction: "ease",
          });
          animationRun.rotate(0).step();
          this.animationData = animationRun.export();
        }.bind(this),
        duration
      );
    },
  },
};
</script>
<style lang="scss" scoped>
/* 转盘 */
.canvas-container {
  margin: 0 auto;
  position: relative;
  width: 600rpx;
  height: 600rpx;
  border-radius: 50%;
  box-shadow: 0 2px 3px #333, 0 0 2px #000;
}
.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 600rpx;
  height: 600rpx;

  border-radius: inherit;
  background-clip: padding-box;
  //   background-color: #ffcb3f;
  background: url("https://cdn.esurl.cn/Darlie/2019/yx100/images/zhaunpan.png")
    no-repeat;
  background-size: 100% 100%;
}

/**
* 抽奖按钮
*/
.canvas-btn {
  position: absolute;
  left: 220rpx;
  top: 220rpx;
  z-index: 400;
  width: 160rpx;
  height: 160rpx;

  text-decoration: none;
  background: url("https://cdn.esurl.cn/Darlie/2019/yx100/images/zhuan.png")
    no-repeat;
  background-size: 100% 100%;
}

.canvas-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}
</style>